<template>
  <view class="wrap bd t1">
    <view
      class="u-item"
      style="padding: 30upx"
      v-for="(v, index) in orderList"
      :key="index"
    >
      <view class="flex flex-j-b">
        <view class="flex" style="font-size: 30upx; font-weight: 900">
          <view>{{ v.planName }}</view>
          <image
            src="../../../static/img/148d4d3772284677b5d871a58aedcd49.png"
            mode="widthFix"
            style="width: 70upx; margin-left: 20upx"
            @click="goTips(v)"
            v-show="v.tips"
          ></image>
        </view>
        <view
          @click="goTestDetial(v)"
          class="iconfont iconarrow-right"
          style="font-size: 40upx; color: #c3c3c3"
        ></view>
      </view>
      <view
        v-for="(v1, index1) in v.vaccinesPlans"
        :key="index1"
        @click="goVacDetail(v1, v.id)"
        class="flex flex-j-b item-li uni-item-line"
      >
        <view style="padding-top: 20upx">
          <view class="">
            <u-tag
              :text="v1.type == 1 ? '免费' : '自费'"
              type="warning"
              size="mini"
              bg-color="#fff"
              :color="v1.type == 1 ? '#18C7E1' : '#F78E3A'"
              :border-color="v1.type == 1 ? '#18C7E1' : '#F78E3A'"
            />
            <text
              style="
                padding: 0 10upx;
                display: inline-block;
                margin-bottom: 20upx;
              "
              >{{ v1.vname }}(第{{ v1.num }}/{{ v1.total }}针)</text
            >
            <view v-if="v1.type == '2'">
              <u-tag
                v-if="v1.adequate == 0"
                text="库存充足"
                type="success"
                size="mini"
              />
              <u-tag
                v-else-if="v1.adequate == 1"
                text="库存紧缺"
                type="warning"
                size="mini"
              />
              <u-tag
                v-else="v1.adequate == 2"
                text="无库存"
                type="error"
                size="mini"
              />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { parseTime } from "@/utils/parseTime";
export default {
  data() {
    return {
      orderList: [], //疫苗信息数据
      tjlist: [],
      list: [
        {
          name: "疫苗接种",
        },
      ],
      current: 0,
      swiperCurrent: 0,
      tabsHeight: 0,
      dx: 0,
      sq: "",
      showTip1: false,
      appointment1: false,
      showTip2: false,
      appointment2: false,
    };
  },
  onLoad() {
    //console.log('这里请求数据');
    let self = this;
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    setTimeout((s) => {
      uni.hideLoading();
    }, 5000);
    this.config
      .get("/adultInfo/getPlanList", {
        pageNum: 1,
        pageSize: 99,
      })
      .then((res) => {
        //console.log(res)
        uni.hideLoading();
        if (res.data.code === 200) {
          // //console.log(res.data.data.list)
          self.orderList = res.data.data.list;
          //console.log(self.orderList)
        } else {
          uni.showToast({
            title: self.config.handleError(res.data),
            icon: "none",
          });
        }
      });
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    // this.getPlan()
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    //跳页刷新
    getPlanss() {
      uni.redirectTo({
        url: "/pages/main/common/yyuejiancha",
      });
    },
    goTips(v) {
      //去小贴士
      uni.navigateTo({
        url: "/pages/main/pub/little-tips?planId=" + v.id + "&tType=" + "3",
      });
    },
    showTips() {
      uni.navigateTo({
        url: "/pages/main/child/backlog/calendar",
      });
    },
    // tab栏切换
    change(index) {
      this.swiperCurrent = index;
    },
    transition({ detail: { dx } }) {
      this.$refs.tabs.setDx(dx);
    },
    animationfinish({ detail: { current } }) {
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    goVacDetail(v, id) {
      //console.log(id)
      //console.log(v)
      uni.navigateTo({
        url:
          "./upcoming-details?planid=" +
          id +
          "&vid=" +
          v.vid +
          "&vtype=" +
          v.type +
          "&sq=" +
          this.sq +
          "&vPid=" +
          v.id+"&isopen="+v.isRegister+"&kcun="+v.adequate,
      });
    },
    tjyue(item) {
      //console.log(item.id)
      uni.navigateTo({
        url: "./tjreport?planid=" + item.id + "&sq=" + this.sq,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
// .uni-item-line::after{
// 	bottom: -15px;
// }
// uni-view.u-tabs-box {
// 	border-top: 1px solid #eeeeee;
// 	border-bottom: 1px solid #eeeeee;
// }
.uni-item-line {
  position: relative;
  padding-bottom: 15px;
}
.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
  margin-bottom: 30rpx;
  position: fixed;
  background-color: #fcffff;
  overflow-y: scroll;
}

.swiper-box {
  flex: 1;
}

.swiper-item {
  height: 100%;
}

// tap栏
.card {
  background-color: #ffffff;
  padding: 30rpx 10rpx 30rpx 30rpx;
  border-bottom: 1px solid #f2f2f2;

  .infotop {
    margin-bottom: 20rpx;
  }

  .ymname {
    font-size: 32rpx;
    font-weight: bold;
  }

  .ubtn {
    background-color: #1dc7e0;
    border: none;
    color: #ffffff;
    margin-right: 10rpx;
  }

  .u1 {
    background-color: #f68e3a;
  }

  .u2 {
    background-color: #18c7e1;
  }

  .xinfo {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}
.cardsss {
  background-color: #ffffff;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .imgs {
    margin: 40rpx 0;
  }
  image {
    width: 50%;
    background-size: contain;
  }
  p {
    font-size: 56rpx;
  }
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
  }
  .bd1 {
    background-color: #38383c !important;
  }
  .t1 {
    color: #ccc !important;
  }
}
</style>